
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="位置" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入位置"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div id="myChart1" style="width: 100%; height: 300px"></div>
    </el-row>
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div id="myChart2" style="width: 100%; height: 300px"></div>
    </el-row>
  </div>
</template>
<script>
// 这个函数 网上  随处可见，我也是应用了别人的。
function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  let o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds(),
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + "";
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? str : padLeftZero(str)
      );
    }
  }
  return fmt;
}

function padLeftZero(str) {
  return ("00" + str).substr(str.length);
}
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
import { listData } from "@/api/system/data";
import { listAddress } from "@/api/system/address";
import { maxlist } from "@/api/system/data";

export default {
  name: "Index",

  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近半天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 999999,
        addressId: undefined,
        address: undefined,
      },
      dataList: [],
      addressOptions: [],
      dateRange: [],
    };
  },
  mounted() {
    this.getList(); //执行下面的函数
  },
  methods: {
    getList() {
      this.loading = true;
      if (null != this.dateRange && "" != this.dateRange) {
        this.dateRange[0] = formatDate(
          this.dateRange[0],
          "yyyy-MM-dd hh:mm:ss"
        );
        this.dateRange[1] = formatDate(
          this.dateRange[1],
          "yyyy-MM-dd hh:mm:ss"
        );
      }
      listData(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          var ar = {};
          this.dataList = response.rows;
           this.dataList = this.dataList.sort(function(a,b){
            return a.dataId - b.dataId
          })
          var times = []
          var wendu = []
          var shidu = []
          var qiya = []
          var pm25 = []
          var pm10 = []
          var aqi = []
          this.dataList.forEach((e) => {
            if (ar[e.wuran] == undefined) {
              ar[e.wuran] = 1;
            } else {
              ar[e.wuran] = ar[e.wuran] + 1;
            }
            times.push(e.createTime)
            wendu.push(e.wendu)
            shidu.push(e.shidu)
            qiya.push(e.qiya)
            pm25.push(e.pm25)
            pm10.push(e.pm10)
            aqi.push(e.aqi)
          });
          var op2 = {
    title: {
        text: '指标监测'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度', '气压', 'PM2.5', 'PM10','AQI']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '温度',
            type: 'line',
            stack: '总量',
            data:wendu
        },
        {
            name: '湿度',
            type: 'line',
            stack: '总量',
            data:shidu
        },
        {
            name: '气压',
            type: 'line',
            stack: '总量',
            data:qiya
        },
        {
            name: 'PM2.5',
            type: 'line',
            stack: '总量',
            data:pm25
        },
        {
            name: 'PM10',
            type: 'line',
            stack: '总量',
            data:pm10
        },
        {
            name: 'AQI',
            type: 'line',
            stack: '总量',
            data:aqi
        }
    ]
};
 let myChart2 = echarts.init(document.getElementById("myChart2"));
           myChart2.setOption(op2);
          var res = [];
          for (let k in ar) {
            res.push({
              name: k,
              value: ar[k],
            });
          }
          let opt = {
            title: {
              text: "污染物比重",
              left: "center",
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "污染物",
                type: "pie",
                radius: "55%",
                data: res,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
           let myChart = echarts.init(document.getElementById("myChart1"));
           myChart.setOption(opt);
        }
      );
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    drawLine() {
      nowYumi().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart1"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "玉米的生长情况";
        opt.series[0].name = "玉米的生长情况";
        opt.series[0].data = res.datas;
        myChart.setOption(opt);
      });

      nowQixiang().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart2"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "气象环境情况";
        opt.series = [
          {
            name: "温度",
            type: "line",
            data: res.wendu,
          },
          {
            name: "湿度",
            type: "line",
            data: res.shidu,
          },
          {
            name: "风力",
            type: "line",
            data: res.fengli,
          },
          {
            name: "降水",
            type: "line",
            data: res.jiangshui,
          },
        ];
        myChart.setOption(opt);
      });

      nowTurang().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart3"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "土壤情况";
        opt.series = [
          {
            name: "温度",
            type: "line",
            data: res.wendu,
          },
          {
            name: "湿度",
            type: "line",
            data: res.shidu,
          },
          {
            name: "ph",
            type: "line",
            data: res.ph,
          },
        ];
        myChart.setOption(opt);
      });

      nowShuifei().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart4"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "水肥情况";
        opt.series = [
          {
            name: "施水量",
            type: "line",
            data: res.shui,
          },
          {
            name: "施氮量",
            type: "line",
            data: res.dan,
          },
          {
            name: "施磷量",
            type: "line",
            data: res.lin,
          },
          {
            name: "施钾量",
            type: "line",
            data: res.jia,
          },
        ];
        myChart.setOption(opt);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
 